<template>
  <div class="detail">
    <!-- 精选博客 -->
    <div class="boke">
      <div class="top">
        <span class="bk"><van-icon name="hot-o" />精选播客</span>
        <div>
          <span>更多</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <ul class="song">
      <li v-for="(item, index) in list" :key="index" class="music">
        <img :src="item.intervenePicUrl" alt="" />
        <span>{{ item.lastProgramName }}</span>
        <div class="count">
          <van-icon name="play-circle-o" />
          <span>{{ (item.id / 10000).toFixed(1) }}</span>
        </div>
      </li>
    </ul>
    <!-- 排行榜 -->
    <div class="board">
      <p>排行榜</p>
      <div class="board_list">
        <ul>
          <li v-for="(item, index) in newlist" :key="index">
            <img :src="item.coverImgUrl" alt="" />
            <div>
              <span>{{ index + 1 }}.</span><span>{{ item.name }}</span>
            </div>
            <van-icon name="minus" />
          </li>
        </ul>
      </div>
    </div>
    <p class="more" @click="show">查看更多</p>
  </div>
</template>

<script>
import { djList, musicList } from "../../../../api/radio";
export default {
  name: "classifydetail",
  data() {
    return {
      detailId: 0,
      list: [],
      newlist: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    //  获取分类id
    const id = this.$route.params.id;
    console.log(id);
    console.log(this.$route.params);
    this.goDetail(id);
    this.musicList();
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //查看更多
    show() {
      document.querySelector(".board").style.height = 560 + "px";
    },
    //精选博客
    async goDetail(id) {
      const params = { type: id };
      const result = await djList(params);
      console.log(result);
      if (result.code === 200) {
        result.djRadios.splice(6, 1);
        this.list = result.djRadios;
      }
    },
    //排行榜
    async musicList() {
      const num = parseInt(Math.random() * 10);
      const params = { limit: 10, offset: num };
      const result = await musicList(params);
      console.log(result);
      this.newlist = result.playlists;
    },
  },
};
</script>

<style scoped>
.top {
  display: flex;
  height: 30px;
}
.top .bk {
  font-weight: bold;
  font-size: 22px;
}
.top div {
  position: relative;
  left: 45%;
  top: 5%;
  border-radius: 20px;
  border: 1px solid #000;
  padding: 3px;
}
.song {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 5px;
}
.song .music {
  width: 30%;
  position: relative;
}
.song .music img {
  width: 100%;
  border-radius: 10px;
}
.music span {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  text-align: center;
}
.count {
  display: inline;
  position: absolute;
  z-index: 999;
  top: 2px;
  right: 2px;
  color: aliceblue;
  font-size: 10px;
  background-color: #4e4c4e;
  border-radius: 10px;
}
.count span {
  display: inline;
}
.board {
  background-color: #fff;
  margin: 20px 15px 0;
  border-radius: 5px;
  height: 180px;
  overflow: hidden;
}
.board p {
  height: 30px;
  line-height: 35px;
  text-align: center;
  font-weight: bold;
}
.board_list ul {
  width: 100%;
}
.board_list ul li {
  width: 100%;
  height: 50px;
  position: relative;
  margin-top: 3px;
}
.board_list ul li img {
  width: 15%;
  height: 50px;
  border-radius: 5px;
}
.board_list ul li div {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 50px;
  padding-left: 15%;
  width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board_list ul li i {
  position: absolute;
  top: 18px;
  right: 30px;
}
.more {
  height: 30px;
  text-align: center;
  line-height: 30px;
  display: block;
}
</style>
